<template>
	<view class="container">
		
		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<uni-link text="url"></uni-link>
		<!-- 按钮事件进行页面跳转 方式1 -->
		<button type="primary" style="border:1,0ch;" @click="buttonNavigationPage('/pages/404/404')">test navigation to</button>
		
		
		<view class="imageIn">
			<image src="../../static/c1.png"></image>
		</view>
		<view class="imageIn2">
			<image src="../../static/c1.png"></image>
		</view>
		<view class="imageIn3">
			<image src="../../static/c1.png"></image>
		</view>
	</view>
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		
		methods:{
			buttonNavigationPage(url){
				uni.navigateTo({
					url:url
				})
			}
		},
	
	}
</script>

<style>
	
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		//container 颜色
		background-color: antiquewhite;
	
		
	}
	
	.intro{
		font-size: 16px;
		color: aqua;
		line-height-step: inherit;
		line-height: initial;
		text-shadow: black;
	}
	
	button{
		background-color: cadetblue;
		padding:4px;
		margin: 14px;
	}
	
	.imageIn{
		background-color: cadetblue;
		border-radius:8px;
		box-align:center;
		border-color: black;
		border: 8px;
	}
	
	image{
		background-color: aqua;
		padding: 2px;
		box-shadow: 2px 2px 1px #FF00FF;
	}

	
</style>
